
/**
 * 
 * @param {element_pagination} 必填
 * @param {pageSize} 必填-每页条数
 * @param {total} 必填-总条数
 * @param {currentPage} 选填-当前页码，默认1
 * @param {showPage} 选填-展示页码数/奇数，默认9页
 * @param {hidePage} 选填-一页时，分页是否显示，默认false不显示
 * @param {left} 选填-上一页显示定制
 * @param {right} 选填-下一页显示定制
 * @param {callback} 选填-回调函数
 */
function pagination(json) {
    if (!json.id) {
        console.error('未传入id');
        return false;
    }
    if (!json.total) {
        console.error('未传入总条数');
        return false;
    }
    if (!json.pageSize) {
        console.error('未传入每页条目个数');
        return false;
    }
    var $Div = document.getElementById(json.id);
    var total = json.total;
    var pageSize = json.pageSize;
    var allPage = Math.ceil(total / pageSize);
    var currentPage = json.currentPage || 1;
    var showPage = json.showPage || 9;
    var hidePage = json.hidePage || false;
    var callback = json.callback || function () { };
    var init = true;
    // 单页时，是否显示
    if (!hidePage && allPage === 1) return;
    // 图标
    var ellipsisSvg = `
            <svg class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="1786" style="color: #1890ff;">
                <path
                    d="M221 592c-44.183 0-80-35.817-80-80s35.817-80 80-80 80 35.817 80 80-35.817 80-80 80z m291 0c-44.183 0-80-35.817-80-80s35.817-80 80-80 80 35.817 80 80-35.817 80-80 80z m291 0c-44.183 0-80-35.817-80-80s35.817-80 80-80 80 35.817 80 80-35.817 80-80 80z"
                    p-id="1787">
                </path>
            </svg>`;

    var leftDoubleArrow = `
            <svg t="1589528897721" class="icon" viewBox="0 0 1024 1024" version="1.1" 
                xmlns="http://www.w3.org/2000/svg" p-id="3163" style="pointer-events:none">
                <path 
                    d="M258.64 512l271.53 271.529c16.662 16.662 16.662 43.677 0 60.34-16.662 16.662-43.678 16.662-60.34 0l-301.699-301.7c-16.662-16.661-16.662-43.677 0-60.339l301.7-301.699c16.661-16.662 43.677-16.662 60.339 0 16.662 16.663 16.662 43.678 0 60.34L258.64 512z" 
                    p-id="3164" fill="#1890ff">
                </path>
                <path 
                    d="M558.64 512l271.53 271.529c16.662 16.662 16.662 43.677 0 60.34-16.662 16.662-43.678 16.662-60.34 0l-301.699-301.7c-16.662-16.661-16.662-43.677 0-60.339l301.7-301.699c16.661-16.662 43.677-16.662 60.339 0 16.662 16.663 16.662 43.678 0 60.34L558.64 512z" 
                    p-id="3165" fill="#1890ff">
                </path>
            </svg>`;
    var rightDoubleArrow = `
            <svg t="1589528997588" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="3287" style="pointer-events:none">
                <path 
                    d="M774.36 512L502.83 783.529c-16.662 16.662-16.662 43.677 0 60.34 16.662 16.662 43.678 16.662 60.34 0l301.699-301.7c16.662-16.661 16.662-43.677 0-60.339l-301.7-301.699c-16.661-16.662-43.677-16.662-60.339 0-16.662 16.663-16.662 43.678 0 60.34L774.36 512z" 
                    p-id="3288" fill="#1890ff">
                </path>
                <path 
                    d="M474.36 512L202.83 783.529c-16.662 16.662-16.662 43.677 0 60.34 16.662 16.662 43.678 16.662 60.34 0l301.699-301.7c16.662-16.661 16.662-43.677 0-60.339l-301.7-301.699c-16.661-16.662-43.677-16.662-60.339 0-16.662 16.663-16.662 43.678 0 60.34L474.36 512z" 
                    p-id="3289" fill="#1890ff">
                </path>
            </svg>`
    var leftArrow = json.left || `
            <svg t="1589439895120" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="1498">
                <path
                    d="M707.323 960.556l56.093-54.503-403.917-392.469 403.917-392.475-56.093-54.502L247.32 513.584l460.004 446.972z m0 0z"
                    p-id="1499">
                </path>
            </svg>`
    var rightArrow = json.right || `
            <svg t="1589439938651" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="1621">
                <path d="M268.373 908.63l60.587 60.074 456.704-460.373L328.704 55.04l-60.075 60.587 396.374 393.216z"
                    p-id="1622"></path>
            </svg>
            `

    //上一页
    var $A = document.createElement('a');
    $A.setAttribute('data-number', (currentPage - 1));
    $A.setAttribute('class', 'element_pagination_pager');
    $A.innerHTML = leftArrow;
    if (currentPage <= 1) {
        $A.style.cssText = 'opacity: 0.4;cursor:default;pointer-events:none';
    }
    $Div.appendChild($A);


    // 扩散算法
    if (allPage <= showPage) {
        for (var i = 1; i <= allPage; i++) {
            var $A = document.createElement('a');
            $A.setAttribute('class', 'element_pagination_pager');
            $A.setAttribute('data-number', i);
            if (currentPage === i) {
                $A.innerHTML = i;
                $A.classList.add('element_pagination_active');
            } else {
                $A.innerHTML = i;
            }
            $Div.appendChild($A);
        }
    } else {
        // 以currentPage数为中心 一共 showPage个数  向左右两侧扩散parseInt(n/2) 个数
        for (var i = 1; i <= showPage; i++) {
            var $A = document.createElement('a');
            $A.setAttribute('class', 'element_pagination_pager');
            // 显示第一页&最后一页
            if (i == 1) {
                $A.setAttribute('data-number', 1);
                $A.innerHTML = i;
                if (currentPage === i) {
                    $A.classList.add('element_pagination_active');
                }
            } else if (i == showPage) {
                $A.setAttribute('data-number', allPage);
                $A.innerHTML = allPage;
                if (currentPage === allPage) {
                    $A.classList.add('element_pagination_active');
                }
            } else {
                // 扩散基准
                var center = parseInt(showPage / 2);
                // 当前页数 小于parseInt(n/2)+1 时 向左扩散会出现小于1的书 要做特殊处理
                if (currentPage < center + 1) {
                    $A.setAttribute('data-number', i);
                    if (currentPage === i) {
                        $A.innerHTML = i;
                        $A.classList.add('element_pagination_active');
                    } else {
                        $A.innerHTML = i;
                    }
                } else if (allPage - currentPage < center) {
                    // 最后几页向右扩散时也会出问题  所以阻止扩散 只显示最后showPage页                        
                    $A.setAttribute('data-number', (allPage - showPage + i));
                    // 特殊处理后parseInt(showPage / 2)几页
                    for (var lastIndex = 0; lastIndex < center; lastIndex++) {
                        if ((allPage - currentPage) === lastIndex && i === (showPage - lastIndex)) {
                            $A.innerHTML = allPage - showPage + i;
                            $A.classList.add('element_pagination_active');
                        }
                        else {
                            $A.innerHTML = (allPage - showPage + i);
                        }
                    }
                }
                // 正常处理方式 以currentPage为中心 向两侧扩散parseInt(showPage / 2)个数
                else {
                    $A.setAttribute('data-number', (currentPage - (center + 1) + i));
                    if (i === (center + 1)) {
                        $A.innerHTML = currentPage - (center + 1) + i;
                        $A.classList.add('element_pagination_active');
                    } else {
                        $A.innerHTML = (currentPage - (center + 1) + i);
                    }
                }
            }
            $Div.appendChild($A);
        }


        // 左省略
        if (currentPage > 4) {
            // 第一页后插入
            var $A = document.getElementsByClassName('element_pagination_pager')[2];
            $A.classList.add('element_pagination_left_ellipsis');
            $A.setAttribute('data-number', (currentPage - 5) > 0 ? (currentPage - 5) : 1);
            $A.innerHTML = ellipsisSvg;

            // 切换图标
            $A.onmouseenter = function () {
                this.innerHTML = leftDoubleArrow;
            }
            $A.onmouseleave = function () {
                this.innerHTML = ellipsisSvg;
            }
        }
        // 右省略
        if ((allPage - currentPage) >= 4) {
            // 最后一页前插入
            var $All = document.getElementsByTagName('a');
            var $A = document.getElementsByClassName('element_pagination_pager')[$All.length - 2];
            $A.setAttribute('class', 'element_pagination_pager');
            $A.classList.add('element_pagination_right_ellipsis');
            $A.setAttribute('data-number', (currentPage + 5) > allPage ? allPage : (currentPage + 5));
            $A.innerHTML = ellipsisSvg;

            // 切换图标
            $A.onmouseenter = function () {
                this.innerHTML = rightDoubleArrow;
            }
            $A.onmouseleave = function () {
                this.innerHTML = ellipsisSvg;
            }
        }
    }

    // 下一页
    var $A = document.createElement('a');
    $A.setAttribute('class', 'element_pagination_pager');
    $A.setAttribute('data-number', (currentPage + 1));
    $A.innerHTML = rightArrow;
    if ((allPage - currentPage) <= 0) {
        $A.style.cssText = 'opacity: 0.4;cursor:default;pointer-events:none';
    }
    $Div.appendChild($A);

    // 绑定事件
    var $All = document.getElementsByClassName('element_pagination_pager');
    for (var i = 0; i < $All.length; i++) {
        $All[i].onclick = function () {
            var currentPage = parseInt(this.getAttribute('data-number'));
            $Div.innerHTML = '';
            pagination({
                id: json.id,
                currentPage: currentPage,
                pageSize: pageSize,
                total: total,
                showPage: showPage,
                hidePage: hidePage,
                left: json.left,
                right: json.right,
                callback: callback
            });

            init = false;
            // 非初始化回调
            if (!init) {
                callback(currentPage);
            }
        }
    }
}


